<template>
  <div class="survey">
    <van-nav-bar title="京洞察" right-text="提交" left-arrow right-arrow @click-right="save" @click-left="$router.back()" />
    <div class="texts">
      <div style="padding:0 10px;">
        <h3 style="text-align: center;">七鲜用户调研</h3>
      </div>
      <p>&ensp;&ensp;&ensp;&ensp;您好，为了能为您提供更好的产品和服务，希望您能在百忙中抽出几分钟时间回答我们的问卷，让我们了解您的意见和建议。我们会对您在问卷中提供的信息保密，期待您的参与!</p>

    </div>
    <div class="maintext">
      <div class="subject" v-for="(item, i) in questionList" :key="i">
        <div class="question">{{ item.question }}</div>
        <van-radio-group v-if="item.type === 'radio'" v-model="result[i].value">
          <van-radio name="A">{{ item.A }}</van-radio>
          <van-radio name="B">{{ item.B }}</van-radio>
          <van-radio name="C">{{ item.C }}</van-radio>
          <van-radio name="D">{{ item.D }}</van-radio>
        </van-radio-group>
        <van-checkbox-group v-if="item.type === 'checkbox'" v-model="result[i].value">
          <van-checkbox name="A" shape="square">{{ item.A }}</van-checkbox>
          <van-checkbox name="B" shape="square">{{ item.B }}</van-checkbox>
          <van-checkbox name="C" shape="square">{{ item.C }}</van-checkbox>
          <van-checkbox name="D" shape="square">{{ item.D }}</van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionList: [
        {
          type: 'radio',
          question: '1、（单选题）最近一次，请问您在 京东七鲜 的购物情况是? (单选)',
          A: '在店内购物过',
          B: '在网上购物过 (七鲜 APP、微信小程序、京东商城等)',
          C: '未购物过',
          D: '其他',
        },
        {
          type: 'checkbox',
          question: '2、(多选题)相比于线下，你认为生鲜电商平台的优势体现在:',
          A: 'A.方便省时，不用去菜场超市购买',
          B: 'B.种类更丰富，选择更多',
          C: 'C.品质更好，比如有机，进口',
          D: 'D.价格更低，经常促销活动',
        },
      ],
      result: [],
      personalAnswer: [],
    }
  },
  created() {
    this.setResult()
  },
  methods: {
    // 根据问题列表生成 result 结构
    setResult() {
      let result = []
      if (!this.questionList.length) {
        result = [{}]
      } else {
        for (let i = 0; i < this.questionList.length; i++) {
          if (this.questionList[i].type === 'radio') {
            result.push({ index: i + 1, value: '' })
          } else {
            result.push({ index: i + 1, value: [] })
          }
        }
      }
      console.log('result==>', result)
      this.result = result
    },
    save() {
      let a = this.result.every(item => item.value.length > 0)
        console.log(a, 'a')
        if (!this.result.every(item => item.value.length > 0)) {
          this.$dialog({ message: '请把所有题都答完' })
        } else {
          this.$notify({ type: 'success', message: '提交成功' });
          // console.log(this.result, 'this.result')
        }
    },
  },
}
</script>

<style lang="scss" scoped >
.survey {
  width: 100%;
  height: 100%;

  .subject {
    padding: 10px 16px;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
  }

  .van-radio,
  .van-checkbox {
    padding-top: 10px;
  }

  .texts {
    padding: 0 10px;
  }
}
</style>
